<template>
  <view
    v-if="visibleSync"
    :class="{ 'uni-drawer--visible': showDrawer }"
    class="uni-drawer"
    @touchmove.stop.prevent="clear"
  >
    <view
      class="uni-drawer__mask"
      :class="{ 'uni-drawer__mask--visible': showDrawer && mask }"
      @tap="close('mask')"
    />
    <view
      class="uni-drawer__content"
      :class="{
        'uni-drawer--right': rightMode,
        'uni-drawer--left': !rightMode,
        'uni-drawer__content--visible': showDrawer,
      }"
      :style="{ width: drawerWidth + 'px' }"
    >
      <slot />
      <scroll-view :scroll-y="true" style="background-color: #fff">
        <view v-for="(item, index) in quabulist" :key="index">
          <view class="title"><span class="h">|</span> {{ item.name }}</view>
          <view class="bankuai">
            <view
              class="category-item"
              hover-class="none"
              v-for="(item1, index1) in item.gonneng"
              :key="index1"
              @tap="showDrawer1(item1)"
            >
              <!-- 在这里创建一个循环遍历的类名为category-item的navigator组件，v-for指令指定遍历的次数为10次，:key属性指定遍历的key值为index -->
              <image class="icon" :src="item1.img" style="width: 50rpx; height: 50rpx"></image>
              <!-- 在这里创建一个类名为icon的image组件，显示图片路径为../../static/tabs/cart_default.png -->

              <text class="text">{{ item1.mingchen }}</text>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>

    <!-- #ifdef H5 -->
    <keypress @esc="close('mask')" />
    <!-- #endif -->
  </view>
</template>

<script>
// #ifdef H5
import keypress from './keypress.js'

// #endif
import { getDrawerAPI } from '@/services/shouye'
/**
 * Drawer 抽屉
 * @description 抽屉侧滑菜单
 * @tutorial https://ext.dcloud.net.cn/plugin?id=26
 * @property {Boolean} mask = [true | false] 是否显示遮罩
 * @property {Boolean} maskClick = [true | false] 点击遮罩是否关闭
 * @property {Boolean} mode = [left | right] Drawer 滑出位置
 * 	@value left 从左侧滑出
 * 	@value right 从右侧侧滑出
 * @property {Number} width 抽屉的宽度 ，仅 vue 页面生效
 * @event {Function} close 组件关闭时触发事件
 */
export default {
  name: 'UniDrawer',
  components: {
    // #ifdef H5
    keypress,
    // #endif
  },
  emits: ['change'],
  props: {
    /**
     * 显示模式（左、右），只在初始化生效
     */
    mode: {
      type: String,
      default: '',
    },
    /**
     * 蒙层显示状态
     */
    mask: {
      type: Boolean,
      default: true,
    },
    /**
     * 遮罩是否可点击关闭
     */
    maskClick: {
      type: Boolean,
      default: true,
    },
    /**
     * 抽屉宽度
     */
    width: {
      type: Number,
      default: 220,
    },
  },
  data() {
    return {
      visibleSync: false,
      showDrawer: false,
      rightMode: false,
      watchTimer: null,
      drawerWidth: 220,
      quabulist: [
        {
          id: 1,
          name: '会员专区',
          gonneng: [
            {
              img: '',
              name: '',
            },
          ],
        },
        {
          id: 2,
          name: '英语',
          gonneng: [
            {
              img: '',
              name: '',
            },
          ],
        },
        {
          id: 3,
          name: '数学',
          gonneng: [
            {
              img: '',
              name: '',
            },
          ],
        },
        {
          id: 4,
          name: '语文',
          gonneng: [
            {
              img: '',
              name: '',
            },
          ],
        },
      ],
    }
  },
  async created() {
    // #ifndef APP-NVUE
    this.drawerWidth = this.width
    // #endif
    this.rightMode = this.mode === 'right'
    let res = await getDrawerAPI()
    this.quabulist = res.data
    console.log(this.quabulist, '我卡卡卡卡卡卡卡卡')
  },
  methods: {
    showDrawer1(e) {
      console.log(e.mingchen, '333333')
    if (e.mingchen == '计算器') {
        uni.navigateTo({
          url: '../../pagesA/jishuanqi/index',
        })
      } else if (e.mingchen == '英语翻译') {
        uni.navigateTo({
          url: '../../pagesA/Translation/index',
        })
      } else if (e.mingchen == '作文批改') {
        uni.navigateTo({
          url: '../../pagesA/zw-takephoto/index',
        })
      } else if (e.mingchen == '古文诗词') {
        uni.navigateTo({
          url: '../../pagesA/guwenshici/index?nianji=' + nianji1.nianji,
        })
      } else if (e.mingchen == '错题本') {
        uni.navigateTo({
          url: '../../pagesB/ks_cuoti/index',
        })
      } else if (e.mingchen == '英语单词') {
        uni.navigateTo({
          url: '../../pagesB/em_word/index',
        })
      } else if (e.mingchen == '英语听力') {
        uni.navigateTo({
          url: '../../pagesB/sy_tingli/index',
        })
      } else if (e.mingchen == 'VIP专区') {
        uni.navigateTo({
          url: '../../pagesB/huiyuanzhuanqu/index',
        })
      } else if (e.mingchen == '下载') {
        uni.navigateTo({
          url: '../../pagesB/sy_xiazai/index',
        })
      }
    },
    clear() {},
    close(type) {
      // fixed by mehaotian 抽屉尚未完全关闭或遮罩禁止点击时不触发以下逻辑
      if ((type === 'mask' && !this.maskClick) || !this.visibleSync) return
      this._change('showDrawer', 'visibleSync', false)
    },
    open() {
      // fixed by mehaotian 处理重复点击打开的事件
      if (this.visibleSync) return
      this._change('visibleSync', 'showDrawer', true)
    },
    _change(param1, param2, status) {
      this[param1] = status
      if (this.watchTimer) {
        clearTimeout(this.watchTimer)
      }
      this.watchTimer = setTimeout(
        () => {
          this[param2] = status
          this.$emit('change', status)
        },
        status ? 50 : 300,
      )
    },
  },
}
</script>

<style lang="scss" scoped>
// 自定义板块
.title {
  font-size: 35rpx;
  color: #b57f7f;
  margin-bottom: 10rpx;
  margin-top: 60rpx;
}
.title .h {
  font-size: 35rpx;
  color: #e3080f;
  margin-left: 30rpx;
}

.category-item {
  width: 120rpx;
  display: flex;
  margin-left: 30rpx;
  margin-right: 10rpx;
  padding: 10rpx 0;
  border-bottom: 1rpx solid #eee;
  box-sizing: border-box;
  flex-direction: column;
  justify-content: space-around; /* 在弹性布局的方向上项目之间的间距相等 */
  align-items: center;
  .icon {
    width: 100rpx;
    height: 100rpx;
  }
  .text {
    width: 100%;
    font-size: 26rpx;
    color: #666;
  }
}
.bankuai {
  width: 100%; /* 宽度占满父元素的宽度 */
  height: 30%; /* 高度占满父元素的高度 */
  display: flex; /* 布局模式设置为弹性布局 */
  // flex-direction: column;             /* 弹性布局的方向设置为垂直方向 */
  /* 在弹性布局的水平方向上项目都居中对齐 */
  flex-wrap: wrap;
}

// 、、////////////////////
$uni-mask: rgba(
  $color: #000000,
  $alpha: 0.4,
);
// 抽屉宽度
$drawer-width: 220px;

.uni-drawer {
  /* #ifndef APP-NVUE */
  display: block;
  /* #endif */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  z-index: 999;
}

.uni-drawer__content {
  /* #ifndef APP-NVUE */
  display: block;
  /* #endif */
  position: absolute;
  top: 0;
  width: $drawer-width;
  bottom: 0;
  background-color: $uni-bg-color;
  transition: transform 0.3s ease;
}

.uni-drawer--left {
  left: 0;
  /* #ifdef APP-NVUE */
  transform: translateX(-$drawer-width);
  /* #endif */
  /* #ifndef APP-NVUE */
  transform: translateX(-100%);
  /* #endif */
}

.uni-drawer--right {
  right: 0;
  /* #ifdef APP-NVUE */
  transform: translateX($drawer-width);
  /* #endif */
  /* #ifndef APP-NVUE */
  transform: translateX(100%);
  /* #endif */
}

.uni-drawer__content--visible {
  transform: translateX(0px);
}

.uni-drawer__mask {
  /* #ifndef APP-NVUE */
  display: block;
  /* #endif */
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: $uni-mask;
  transition: opacity 0.3s;
}

.uni-drawer__mask--visible {
  /* #ifndef APP-NVUE */
  display: block;
  /* #endif */
  opacity: 1;
}
</style>
